<template>
  <div class="rounded-lg bg-white shadow-md p-6 flex flex-col gap-4">
    <div class="flex justify-between items-center">
      <button>
        <Icon
          name="tabler:chevron-left"
          class="text-4xl rounded-md p-1 border-[#8B7FF5] border-2 text-[#8B7FF5]"
          @click="base = base.subtract(1, 'month')"
        />
      </button>
      {{ base.year() }} - {{ base.month() + 1 }}
      <button>
        <Icon
          name="tabler:chevron-right"
          class="text-4xl rounded-md p-1 border-[#8B7FF5] border-2 text-[#8B7FF5]"
          @click="base = base.add(1, 'month')"
        />
      </button>
    </div>
    <div class="grid grid-cols-7 bg-[rgb(255,241,227)] text-center">
      <div v-for="day in ['日', '一', '二', '三', '四', '五', '六',]" :key="day">
        {{ day }}
      </div>
    </div>
    <div class="grid grid-cols-7 gap-4">
      <div v-for="date in days" :key="date" class="flex justify-center" @click="handleSelect(date)">
        <div
          v-if="date.month() === base.month()"
          class="rounded-full cursor-pointer select-none transition-all p-2 aspect-square w-10 flex items-center justify-center"
          :class="`${
            date.toString() === selected ?
              'bg-[#8B7FF5] text-white' :
              date.isToday() ?
                'bg-[#E2DFFC]' :
                date.diff(dayjs(menstrual),'day') <= 5 && date.diff(dayjs(menstrual),'day') >= 0 ?
                  'bg-[#FC91B6] text-white' :
                  date.diff(dayjs(menstrual),'day') % 28 <= 5 && date.diff(dayjs(menstrual),'day') % 28 >= 0 ?
                    'bg-[rgb(255,226,236)]':
                    date.diff(dayjs(menstrual),'day') % 28 <= 19 && date.diff(dayjs(menstrual),'day') % 28 >= 9 ?
                      'bg-[rgb(213,240,239)]':''
          }`"
        >
          {{ date.date() }}
        </div>
      </div>
    </div>
    <div class="flex justify-between mt-4">
      <div class="flex items-center gap-4">
        <div class="flex gap-2 items-center">
          <div class="w-4 h-4 bg-[#FC91B6] rounded-full" />经期
        </div>
        <div class="flex items-center gap-4">
          <div class="w-4 h-4 bg-[rgb(255,226,236)] rounded-full" />预测经期
        </div>
        <div class="flex items-center gap-4">
          <div class="w-4 h-4 bg-[rgb(213,240,239)] rounded-full" />排卵期
        </div>
      </div>
      <Icon
        class="self-end text-3xl text-[#FC91B6] cursor-pointer"
        :name="menstrual.includes(selected) ? `tabler:moon-filled` : `tabler:moon`"
        @click="handleMoon"
      />
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import isToday from 'dayjs/plugin/isToday'
dayjs.extend(isToday)
// 今天
const base = ref(dayjs())
const days = computed(() => {
  const re = []
  // 获取本月第一天
  const firstDayOfMonth = base.value.startOf('month')

  // 获取本月第一个星期天
  const firstSundayOfMonth = firstDayOfMonth.day(0)
  // 获取本月最后一天
  const lastDayOfMonth = base.value.endOf('month')

  // 获取本月最后一个星期六
  const lastSaturdayOfMonth = lastDayOfMonth.day(6)
  for (let date = firstSundayOfMonth; date.isBefore(lastSaturdayOfMonth); date = date.add(1, 'day')) {
    re.push(date)
  }
  return re
})

const selected = ref('')
const menstrual = ref('')

function handleMoon () {
  if (!selected.value) { return }
  if (menstrual.value === selected.value) {
    menstrual.value = ''
  } else { menstrual.value = selected.value }
}

function handleSelect (date) {
  if (selected.value === date.toString()) { selected.value = '' } else { selected.value = date.toString() }
}
</script>
